<template>
  <!-- 第一行 -->
   <div class="top"> 
      <!-- 第一排 -->
      <div class="first">
      <el-form-item>
      <el-select v-model="form.classify" placeholder="企业分类" style="width: 150px" @change="search">
        <el-option label="国有" value="国有" />
        <el-option label="民营与其它" value="民营与其它" />
        <el-option label="外资" value="外资" />
      </el-select>
    </el-form-item>
      <el-form-item>
      <el-select v-model="form.grade" placeholder="企业分级" style="width: 150px" @change="search">
        <el-option label="市属" value="市属" />
        <el-option label="区属" value="区属" />
      </el-select>
    </el-form-item>
      <el-form-item>
      <el-select v-model="form.industry" placeholder="所属行业" style="width: 150px" @change="search">
        <el-option label="工业" value="工业" />
        <el-option label="服务业" value="服务业" />
        <el-option label="建筑业" value="建筑业" />
      </el-select>
    </el-form-item>
      <el-form-item>
      <el-select v-model="form.zone" placeholder="所属市区" style="width: 150px" @change="search">
        <el-option label="临海市南关区" value="临海市南关区" />
      </el-select>
    </el-form-item>
      <el-form-item>
      <el-select v-model="form.street" placeholder="所属街道" style="width: 150px" @change="search">
        <el-option label="华康街道" value="华康街道" />
      </el-select>
    </el-form-item>
      <el-form-item>
      <!-- <el-select v-model="form.infor" placeholder="账户创建" style="width: 100px" @change="search">
        <el-option label="已创建" value="已创建" />
        <el-option label="未创建" value="未创建" />
      </el-select> -->
      <el-select v-model="form.createe" placeholder="企业信息确认" style="width: 100px" @change="search">
        <el-option label="已确认" value="已确认" />
        <el-option label="未确认" value="未确认" />
      </el-select>
    </el-form-item>
      <!-- 日期 -->
      <div class="demo-date-picker">
        <div class="block">
          <el-date-picker
            v-model="value"
            type="daterange"
            range-separator="To"
            start-placeholder="Start date"
            end-placeholder="End date"
            :size="size"
          />
        </div>
      </div>
      </div>
  
     </div>
 
     <!-- 第二排 -->
       <div class="second">
     
     <!-- 搜索框 -->
     <div class="asearch">
          <el-input
        v-model="input"
        class="w"
        size="large"
        placeholder="请输入关键词"
        clearable
      />
      <el-button type="primary" class="btn" @click="search">搜索</el-button>
     </div>



     <div class="part">
     <!-- 导出 -->
     <el-button type="primary"  @click="exports">导出数据</el-button>
 
     
   </div>
     </div>
  <div>
   <!-- 企业用户以及信息管理表格 -->
        <el-table :data="tableData" border  #default="scope" style="width: 100%">
            <el-table-column prop="enterprise_id" label="序号" align="center" width="70"/>
            <el-table-column prop="name" label="企业名称" align="center" width="200" />
            <el-table-column prop="organization_code" label="组织机构代码" align="center" />
            <el-table-column prop="classify" label="企业分类" align="center" />
            <el-table-column prop="industry" label="所属行业" align="center" />
            <el-table-column prop="grade" label="企业分级" align="center" />
            <el-table-column prop="zone" label="所属市区" align="center" width="120" />
            <el-table-column prop="street" label="所属街道" align="center" />
            <el-table-column prop="createe" label="账户创建" align="center" />
            <el-table-column prop="infor" label="企业信息确认" align="center" />
            <el-table-column prop="create_time" label="创建时间" align="center" width="160"   />
             <el-table-column fixed="right" label="操作" width="150" align="center">
     <template #default="scope">
       <el-button link type="primary" size="small" @click="create(scope.$index, scope.row)">创建账户</el-button>
       <el-button link type="primary" size="small" @click="reset(scope.$index, scope.row)">重置密码</el-button>
     </template>
   </el-table-column>
        </el-table>
  <!-- 分页 -->
     <!-- 分页 -->
  <div style="margin-left: 20px;" id="pageall">
    <el-pagination
          :current-page="page.pageNum"
          :page-size="page.pageSize"
          :page-sizes="[2, 5, 10, 20]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totallenght"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
      />
   </div>
 
</div>
 </template>
 
 <script lang="ts">
import {useStore} from 'vuex'
import {useRouter} from 'vue-router'
import axios from 'axios'
import {onMounted,ref,defineComponent,reactive} from 'vue'
import * as XLSX from 'xlsx'
import { ElMessage} from 'element-plus'

export default defineComponent({
  name: "alist",
  setup(){
    const store=useStore();
    const router=useRouter();
     //搜索
   const value=ref("")
   const size=ref("")
   const input=ref("")
   let form:any = ref({
      classify:'',
      grade:'',
      industry:'',
      zone:'',
      street:'',
      // createe:'',
      info:'',
   })
   let tableData=ref([])
   //搜索
     const search=()=>{
      console.log(form.value.classify)
      axios({
        url:'http://172.16.123.99:8080/enterprise/findEnterpriserByCondition',
        method:'post',
        params:{
          classify:form.value.classify,
          grade:form.value.grade,
          industry:form.value.industry,
          zone:form.value.zone,
          street:form.value.street,
          name:input.value,
          // createe:form.value.createe,
          info:form.value.info,
          pageIndex:1,
          pageSize:10      
        }
      }).then(resp=>{
        tableData.value=[]
        tableData.value=resp.data.data
        console.log(694,resp.data.data)
              
      })
     }
      //创建账户
        const create= (index:any,row:any) => {
          //先判断账户是否存在
          axios({
            url:'http://172.16.123.99:8080/enterprise/pdEnterpriser',
            method:'post',
            params:{
              id:row.enterprise_id,
      }
    }).then((res) => {
						if(res.data.code === 200){
              //账户存在就不进入按钮
							ElMessage({
								type: 'warning',
								message: '该账户已存在!'
							});          
						}else{
							//账户不存在就可以进入
              router.push({path:"/caccount",query:{id:row.enterprise_id}})
						}
					}).catch((err) => {
						console.log('错误了',err);
					})}       
      //重置密码
        const reset= (index:any,row:any) => {
          axios({
            url:'http://172.16.123.99:8080/enterprise/pdEnterpriser',
            method:'post',
            params:{
              id:row.enterprise_id,
      }
    }).then((res) => {
						if(res.data.code === 200){
              //账户存在就可以进入
              router.push({path:"/reset",query:{id:row.enterprise_id}})         
						}else{
							//账户不存在就可以进入
              ElMessage({
								type: 'warning',
								message: '还未创建账户，请先创建账户!'
							}); 
						}
					}).catch((err) => {
						console.log('错误了',err);
					})
}
let  totallenght=ref(0)
    //分页
    const page = reactive({//配置对应的查询参数
      pageNum: 1,
      pageSize: 5,
    });
//表格数据渲染
    function GetUserData(){
     axios({
      url:'http://172.16.123.99:8080/enterprise/findEnterpriserByCondition',
      method:'post',
      params:{
        pageIndex:page.pageNum,
        pageSize:page.pageSize,
      }
    }).then(resp=>{
      tableData.value=resp.data.data
      totallenght.value=resp.data.conut
      const getDate=(timestamp:any)=>{
     var date = new Date(timestamp); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
  var Y = date.getFullYear() + '/';
  var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '/';
  var D = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate()) + ' ';
  var h = (date.getHours() < 10 ? '0' + (date.getHours()) : date.getHours()) + ':';
  var m = (date.getMinutes() < 10 ? '0' + (date.getMinutes()) : date.getMinutes()) + ':';
  var s = (date.getSeconds() < 10 ? '0' + (date.getSeconds()) : date.getSeconds());
  return Y + M + D + h + m + s;    
 } 
 for(let i=0;i<tableData.value.length;i++){
               
  tableData.value[i].create_time=getDate(tableData.value[i].create_time)
          }
      
     })
    }
    onMounted(()=>{
      GetUserData()
      console.log(tableData)
    })
    const handleSizeChange = (val: number) => {
      page.pageSize = val
      console.log(val)
      GetUserData();
    }
    const handleCurrentChange = (val: number) => {
      page.pageNum = val
      console.log(val)
      GetUserData();
    }
    //导出数据
    const exports= () => {
      axios({
                method: "post",
                url: "http://1.14.73.59:8080/enterprise/findEnterpriserInformationList",
            }).then((resp) => {
                console.log(resp)
            })
            const data: any = XLSX.utils.json_to_sheet(tableData.value)//此处tableData.value为表格的数据
            const wb: any = XLSX.utils.book_new()
            XLSX.utils.book_append_sheet(wb, data, 'test-data')//test-data为自定义的sheet表名
            XLSX.writeFile(wb, 'account.xlsx')//test.xlsx为自定义的文件名
            console.log(111)
}
return{
          XLSX,
          ref,
          create,
          reset,
          router,
          store,
          tableData,
          totallenght,
          input,
          size,
          value,
          search,
          form,
          exports,
          ElMessage,
          page,
          handleSizeChange,
          handleCurrentChange,
          reactive
        }
  }
})
 </script>
 <style scoped>
 .top{
        height: 50px;
        /* border:1px solid red; */
        display: flex;
        flex-direction:column; 
      }
      .first{
        display: flex;
        justify-content:space-between;   
      }
      .second{
        display: flex;
        /* border:1px solid red; */
        justify-content:space-between; 
      }
     .demo-date-picker{
      display: flex;
      margin-top:0px;
     }
     .select{
      width:150px;
      margin: 10px;
    }
 
/* 表格 */
#pageall {
    display: flex;
    justify-content: center;
}
.part{
    display:flex;
    justify-content: flex-end; 
    align-items: center;
}
.asearch{
         display:flex;
         flex-direction:row;
         align-items: center;
         justify-content:center;
         position:relative;
      }
      .btn{
         position:absolute;
         right:-60px;
      }
      .w {
 height: 31.99px;
 margin: 10px;
}
 </style>
 